<template>
	<view class="rule-page flex-col align-center" :style="{paddingTop:calculateHeight}">
		<x-card background="#000" color="#FFF" border="none" fontWeight="800">收藏的卡片</x-card>
		<scroll-view style="height: 100vh;" scroll-y>
			<view class="flex-col align-center" style="width: 100vw;" v-if="cardList.length">
				<view class="justify-start flex-wrap">
					<view @tap="slect=index" :class="[slect==index?'bor':'']"
						class="card-border justify-center align-center" v-for="(item,index) in cardList" :key="index">
						<view class="card">
							<colorBg :custom='true' :index='index'></colorBg>
						</view>
						<view class="justify-around btn" v-if="slect==index">
							<x-card fontSize="30rpx" background="#000" color="#FFF" border="none" @tap="useCard">使用</x-card>
							<x-card fontSize="30rpx" background="#000" color="#FFF" border="none" @tap="close">返回</x-card>
						</view>
					</view>
					
				</view>


				<view class="" style="height: 250rpx;">

				</view>
			</view>
			<view v-if="!cardList.length" class="" style="font-size: 100px;" @tap="close">
				空 点我返回
			</view>
		</scroll-view>

	</view>
</template>

<script>
	// #ifdef VUE3
	import {
		getCurrentInstance
	} from 'vue'
	import colorBg from './colorBg.vue'
	
	// #endif
	export default {
		components: {
			colorBg
		},
		data() {
			return {
				cardList: [],
				slect: 0,
			}
		},
		created() {
			uni.setStorageSync('color_config_custom', null)
			let arr = uni.getStorageSync('color_config')
			if (arr!='undefind') {
				console.log('arr',arr);
				this.cardList = arr
			}
		},
		computed: {
			calculateHeight() {
				const {
					globalProperties: global
				} = getCurrentInstance().appContext.config;
				return `calc(${global.statusBarHeight}px)`;
				// // #ifdef VUE2
				// return `${this.statusHeight}px + ${this.height}rpx`;
				// // #endif
			},
		},
		methods: {
			useCard() {
				console.log('使用牌');
				uni.setStorageSync('color_config_custom', this.cardList[this.slect])
				this.$emit('use')
				this.$emit('close')
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rule-page {
		background: rgba(255, 255, 255, 0.85);
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 99999;

		.btn {
			position: absolute;
			z-index: 99999;
		}

		.bor {
			border: 10rpx solid #00aa00;
		}

		.card-border {
			margin: 10rpx;
			width: 220rpx;
			height: 270rpx;
			background-color: #000;
			border-radius: 30rpx;
			overflow: hidden;
		}

		.card {
			width: 200rpx;
			height: 250rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}
	}
</style>